<style>
	.itemActive {
		background: blue;
	}
	.boldActive {
		background: ghostwhite;
	}
	.treeUl {
		padding-left: 2em;
		/*line-height: 1.5em;*/
	}
	.treeLi {
		cursor: pointer;
		width: 100%;
		padding: 10px;
		border-radius: 2px 2px;
		border-bottom: 1px solid gainsboro;
		border-left: 1px solid gainsboro;
	}
	.treeLi:hover {
		background: gainsboro;
	}

</style>
<!-- the demo root element -->
<div id="treeUI">
	<!--加入子组建-->
	<tree-component class="item" :model="treeData"></tree-component>
</div>
<!-- item template -->
<script type="text/x-template" id="item-template">
	<li style="list-style-type:none;" >
		<!--展开节点-->
		<div :class="['treeLi',{'boldActive':open}]" @click="toggle(model)" @dblclick="itemDbClick(model)" tabindex="-1">
			<span v-if="!isFolder">&nbsp;</span>
			<span v-if="isFolder">{{ open ? '-' : '+' }}</span>
			<span >{{ model.name }}</span>
		</div>
		<!--子节点-->
		<ul v-show="open" v-if="isFolder" class="treeUl">
			<!--加入子列表-->
			<tree-component v-for="(model, index) in model.childList" :key="index" :model="model"></tree-component>
		</ul>
	</li>
</script>

<script>
	// 注册item列表控件 父组件
	Vue.component('treeComponent', {
		template: '#item-template',
		props: {
			model: Object
		},
		//模板数据
		data: function () {
			return {
				open: false,
			}
		},
		//字段监控
		computed: {
			isFolder: function () {
				return (this.model.childList != null && this.model.childList.length > 0);
			}
		},
		methods: {
			//点击变更列表
			toggle: function (item) {
				Vue.prototype.$clickTreeItem(item,this.isFolder);
				if (this.isFolder) {
					this.open = !this.open;
				}
			},
			itemDbClick: function (item) {
				Vue.prototype.$dbClickTreeItem(item,this.isFolder);
			}
		}
	});

	// boot up the demo
	var treeUI = new Vue({
		el: '#treeUI',
		data: {
			treeData: {}
		},
		//加载节点
		created: function(){
		}
	});

	//向外暴露接口
	Vue.prototype.$registerTreeComponent = function (clickCallBack , dbClickClallBack){
		Vue.prototype.$clickTreeItem = clickCallBack;
		Vue.prototype.$dbClickTreeItem = dbClickClallBack;
	}
</script>

<!--demo-->
<!--<script>-->
	<!--var data = {-->
		<!--name: '总菜单',-->
		<!--childList: [-->
			<!--{ name: '商品管理' },-->
			<!--{ name: '基础配置' },-->
			<!--{-->
				<!--name: '产品中心',-->
				<!--childList: [-->
					<!--{-->
						<!--name: 'child folder',-->
						<!--childList: [-->
							<!--{ name: 'hello' },-->
							<!--{ name: 'wat' }-->
						<!--]-->
					<!--},-->
					<!--{ name: 'hello' },-->
					<!--{ name: 'wat' },-->
					<!--{-->
						<!--name: 'child folder',-->
						<!--childList: [-->
							<!--{ name: 'hello' },-->
							<!--{ name: 'wat' }-->
						<!--]-->
					<!--}-->
				<!--]-->
			<!--}-->
		<!--]-->
	<!--};-->
	<!--Vue.prototype.$registerTreeComponent(data,-->
			<!--function(item,isFolder) {-->
				<!--console.log('$clickTreeItem:11' + item.name + isFolder);-->
				<!--console.log(isFolder);-->
			<!--},-->
			<!--function(item,isFolder) {-->
				<!--console.log('$dbClickTreeItem:22	' + item.name + ' ' + isFolder);-->
			<!--}-->
	<!--);-->
<!--</script>-->

